<template>
  <div class="business">
    <div class="header flexbetween">
      <div class="flexleft" style="flex:1">
        <div class="shutup pointer" @click="shutup">
          <!-- 关闭 -->
          <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
        </div>
        <div class="margin-left1 margin-right3">
          <img alt="" class="logoimg" src="@/assets/img/layout/logo.png">
        </div>
        <div class="title">{{ companyName }}</div>
      </div>
    </div>
    <div class="content flexbetween">
      <div class="l">
        <div class="nav-title padding15"></div>
        <el-menu
          :default-active="$route.name"
          :router="true"
          active-text-color="#1063f1"
          background-color="#fff"
          class="el-menu-vertical-demo"
          text-color="#333"
          @select="handleSelect">
          <el-menu-item index="companyInfo">
            <i class="el-icon-eleme"></i>
            <span slot="title">基本信息</span>
          </el-menu-item>
          <el-submenu index="businessMember">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>成员管理</span>
            </template>
            <el-menu-item index="member">企业成员</el-menu-item>
          </el-submenu>
          <el-menu-item index="relevance">
            <i class="el-icon-eleme"></i>
            <span slot="title">电子签名服务</span>
          </el-menu-item>
          <el-menu-item index="SealAdminBusiness">
            <i class="el-icon-eleme"></i>
            <span slot="title">印章管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="r">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "business",
  components: {},
  data() {
    return {
      // businessActivePath: "",
      companyName: localStorage.getItem("bussinesname") || ""
    };
  },
  created() {
    // this.businessActivePath = sessionStorage.getItem("businessActivePath") || "companyInfo";
  },
  destroyed() {
    // sessionStorage.setItem("businessActivePath", "companyInfo");
  },
  methods: {
    handleSelect(index) {
      // sessionStorage.setItem("businessActivePath", index);
      // this.businessActivePath = index;
    },
    shutup() {
      // sessionStorage.setItem("businessActivePath", "companyInfo");
      this.$router.replace({ path: "/business/allCompany" });
    }
  }
};
</script>

<style lang="scss">
.business {
  .el-submenu .el-menu-item {
    min-width: 0;
  }
}
</style>

<style lang="scss" scoped>
.business {
  background-color: #fff;

  .header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    height: 60px;
  }

  .logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
  }

  .shutup {
    background-color: #3b4049;
    padding: 15px 20px;
  }

  .title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
  }


  .content {
    width: 100vw;
    height: calc(100vh - 60px);
    margin-top: 60px;
    box-sizing: border-box;

    .l {
      height: 100%;
      min-width: 190px;
      box-sizing: border-box;
      border-right: 1px solid #e4e4e4;

      .nav-title {
        height: 50px;
        border-bottom: 1px solid #e4e4e4;
      }
    }

    .r {
      flex-grow: 1;
      height: 100%;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
    }
  }


}

</style>